import React from "react";
import { Story, Meta } from '@storybook/react/types-6-0';
import { Badge, BadgeProps } from "./index";
import { Icon } from '../icon'

export default {
	title: "Example/Badge",
  component: Badge,
  argTypes: {
    // https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations
    children: {
      control: 'text',
    }
  }
} as Meta;

const Template: Story<BadgeProps> = (args) => <Badge {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  status: "neutral",
  children: '德玛西亚'
};

export const all = () => (
	<div>
		<Badge status="positive">Positive</Badge>
		<Badge status="negative">Negative</Badge>
		<Badge status="neutral">Neutral</Badge>
		<Badge status="error">Error</Badge>
		<Badge status="warning">Warning</Badge>
	</div>
);

export const withIcon = () => (
	<Badge status="warning">
		<Icon icon="check" />
		with icon
	</Badge>
);
